<template>
	<view class="taskList">
		<view class="pageBox">
			<view class="pageLeft" style="position: fixed;z-index: 999;height: 85%;background-color: #fff;left: 20rpx;">
				<view style="flex: 1;">
					<view class="leftItem" v-for="item in leftMenuTop" :key="item.key" @click="handleLeft(item.key)">
						<view :class="item.key==leftKey?'block active':'block'">
							<image :src="item.srcUrl" mode="aspectFit"></image>
							<view class="">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
				<view style="position: fixed;bottom: 50rpx;">
					<view class="leftItem" v-for="item in leftMenuBottom" :key="item.key" @click="handleLeft(item.key)">
						<view :class="item.key==leftKey?'block active':'block'">
							<image :src="item.srcUrl" mode="aspectFit"></image>
							<view class="">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pageRight" style="padding: 10px;">
				<Application ref="Application" :pid="pid" :pName="pName" v-show="leftKey!=3" />
				<!-- 项目成员 -->
				<view v-show="leftKey==3" style="height: 100%;">
					<view class="rightItem" style="height: 80rpx;">
						<view class="add" @click="$refs.PopupCheckboxs.open('noProjectID')">
							<uni-icons type="plusempty" style="font-size: 80rpx;color: #999;"></uni-icons>
						</view>
					</view>
					<uni-list>
						<uni-list-item v-for="item in userList" :key="item.Id" :title="item.NickName" :note="item.Phone"
							:thumb="item.Icon||'/static/paiLogo.png'" thumb-size="lg">
							<template v-slot:footer>
								<uni-icons @click="handleDel(item)" type="trash" color="red" style="font-weight: bold;"
									v-if="isView(item)"></uni-icons>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
		</view>
		<uni-popup ref="CreateUser" type="dialog">
			<uni-popup-dialog type="info" title="指定创建人" @confirm="dialogInputConfirm" before-close
				@close="$refs.CreateUser.close()">
				<view style="width: 100%;">
					<uni-data-select v-model="newCreateUser" :localdata="localdata">
					</uni-data-select>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<PopupCheckboxs ref="PopupCheckboxs" @subclickRow="subclickRow" :parentObj="{ ... this }"></PopupCheckboxs>
	</view>
</template>

<script>
	// import BackTabBar from '@/components/BackTabBar.vue'
	import Application from './cPage/Application.vue'
	import PopupCheckboxs from './cPage/PopupCheckboxs.vue'

	export default {
		components: {
			// BackTabBar, // 返回
			Application, // 应用
			PopupCheckboxs
		},
		props: {
			pid: {
				require: true
			},
			pName: {
				require: true
			},
			creatorId: {
				type: String,
				require: true,
				default: ''
			}
		},
		data() {
			return {
				ProjectId: this.pid,
				leftMenuTop: [{
					title: '未巡检',
					key: '0',
					srcUrl: "/static/Faqi.png",

				}, {
					title: '巡检中',
					key: '1',
					srcUrl: "/static/Xunjian.png",
				}, {
					title: '已报告',
					key: '2',
					srcUrl: "/static/Baogao.png"
				}],
				leftMenuBottom: [{
					title: '成员',
					key: '3',
					srcUrl: "/static/cy.png"
				}],
				leftKey: '',
				userList: [],
				userInfo: {},
				newCreateUser: '',
				localdata: []
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.getUserList()
			this.$refs.Application.getDataList(this.leftKey)
		},
		methods: {
			isView(item) {
				if (this.creatorId === this.userInfo.Id) {
					return true
				} else if (item.UserId === this.userInfo.Id) {
					return true
				} else {
					return false
				}
			},
			dialogInputConfirm() {
				if (!this.newCreateUser) return uni.showToast({
					icon: 'none',
					title: '请选择新的项目创建人'
				})
				uni.showLoading({
					mask: true
				})
				this.$http('Base_ProjectWork/Base_ProjectPartake/DeleteProjectPartakeUserData', {
					"UserId": this.newCreateUser,
					"PartakeUserId": this.userList.filter(item => item.IsManage)[0].UserId,
					"ProjectId": this.pid
				}).then(res => {
					uni.hideLoading()
					if (res.Success) {
						this.getUserList()
						uni.showToast({
							icon: 'none',
							title: '操作成功'
						})

						this.$refs.CreateUser.close()
						uni.navigateBack()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					}
				})
			},
			// 左侧菜单点击
			handleLeft(key) {
				this.leftKey = key
				console.log(this.leftKey);
				if (key != 3) {
					this.$refs.Application.getDataList(this.leftKey)
				}
			},
			// 选择成员
			subclickRow(arr) {
				let newArr = [];
				arr.forEach(async (item) => {
					let idx = this.userList.findIndex((im) => {
						console.log(item, im);
						return im.UserId == item.MailUserId
					});
					if (idx === -1) {
						newArr.push({
							ProjectId: this.pid,
							UserId: item.MailUserId
						});
					}
				});
				if (newArr.length <= 0) uni.showToast({
					icon: 'none',
					title: '成员已存在'
				})
				else this.addUser(newArr)
			},
			// 成员添加
			addUser(newArr) {
				uni.showLoading()
				this.$http('Base_ProjectWork/Base_ProjectPartake/SaveDataByList', newArr).then(res => {
					uni.hideLoading()
					if (res.Success) {
						this.getUserList()
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			},
			// 成员删除
			handleDel(item) {
				if (item.IsManage) {
					uni.showModal({
						title: '提示',
						content: '当前成员为项目创建人,确认删除吗?',
						success: (val) => {
							if (val.cancel) return
							this.localdata = this.userList.map(item => {
								return {
									text: item.UserName,
									value: item.UserId,
									disable: item.IsManage
								}
							})
							this.newCreateUser = ''
							this.$refs.CreateUser.open()
						},
					})
				} else uni.showModal({
					title: '提示',
					content: '此操作将移除当前成员,确认继续吗?',
					success: (val) => {
						if (val.cancel) return
						this.$http('Base_ProjectWork/Base_ProjectPartake/DeleteProjectPartakeUserData', {
							"UserId": '',
							"PartakeUserId": item.UserId,
							"ProjectId": item.ProjectId
						}).then(res => {
							if (res.Success) {
								this.getUserList()
								uni.showToast({
									icon: 'none',
									title: '操作成功'
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.Msg
								})
							}
						})
					}
				})
			},
			getUserList() {
				this.$http('Base_ProjectWork/Base_ProjectPartake/GetProjectPartakeUserList?ProjectId=' + this.pid).then(
					res => {
						if (res.Success) {
							this.userList = res.Data
						}
					})
			},
		}
	}
</script>

<style scoped lang="scss">
	.taskList {
		width: 100%;
		height: 100%;

		.pageBox {
			height: 100%;
			display: flex;

			.pageLeft {
				box-sizing: border-box;
				padding-top: 20rpx;
				display: flex;
				flex-direction: column;

				.leftItem {
					text-align: center;
					padding: 10rpx 0;

					.block {
						width: 130rpx;
						height: 120rpx;
						margin: 0 auto;
						border-radius: 20rpx;
						box-sizing: border-box;
						padding: 10rpx 0;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.active {
						background-color: #f0f0f0;
					}
				}
			}

			.pageRight {
				flex: 1;
			}

		}
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.image {
		width: 25px;
		height: 25px;

	}

	.text {
		font-size: 14px;
		margin-top: 5px;

	}
</style>